<template>
    <div class="container" id="building">
      <div class="grid-content bg-purple-light form-content">
        <el-form ref="form" label-width="70px" :inline="true" class="login_container" :rules="rules" :model="form">
          <h3 class="login_title">注册</h3>
          <el-form-item label-width= "80px" label="用户名" prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名" class="transparent-input"></el-input>
          </el-form-item>
          <el-form-item label-width= "80px" label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" type="password" class="transparent-input"></el-input>
          </el-form-item>
          <!-- 确认密码输入框 -->
          <el-form-item label-width= "80px" label="确认密码" prop="confirmPassword">
            <el-input v-model="form.confirmPassword" placeholder="请确认密码" type="password" class="transparent-input"></el-input>
          </el-form-item>
          <el-form-item >
            <el-button @click="submit()" style="width: 150px; margin: auto 80px;" class="glass-button" type="primary">注册</el-button>
          </el-form-item>
          <el-form-item>
            <a href="#" @click.prevent="jump_login">已有账号？去登录</a>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
    data(){
        return {
            form:{
                username:'',
                password:'',
                confirmPassword: '', 
            },
            rules:{
                username:[
                    {required: true,trigger: 'blur',message: '请输入用户名'}
                ],
                password:[
                    {required: true,trigger: 'blur',message: '请输入密码'}
                ],
                confirmPassword: [
                { required: true, trigger: 'blur', message: '请确认密码' },
                {
                  validator: (rule, value, callback) => {
                    if (value !== this.form.password) {
                      callback(new Error('两次输入的密码不一致'));
                    } else {
                      callback();
                    }
                  },
                  trigger: 'blur',
                },
              ]
            }
        }
    },
    methods:{
        jump_login(){
            if(this.$route.path !== "/login" ) {
                this.$router.push("/login")
            }
        },
        submit(){
            this.$refs.form.validate((valid)=>{
                if(valid){
                    this.$axios.post('/register',JSON.stringify({
                            username:this.form.username,
                            password:this.form.password
                        }),{headers:{'Content-Type':'application/json'}})
                    .then(({data}) => {// 请求成功，返回
                        console.log(data);
                        if(data.code===200){
                            this.$message({
                              type: 'success',
                              message: data.data.message
                            });
                            this.$router.push('/login')
                        }else{
                            this.$message({
                              type: 'error',
                              message: data.data.message
                            });
                            this.$message.error(data.data.message)
                        }
                    })
                    .catch((err) => {// 请求失败
                        console.log(err);
                    });
                }
            })
            
        }
    }
}
</script>

<style lang="less" scoped>
a {
    margin-left: 150px;
    font-size: 15px;
    text-decoration: none;
    color: #dceff7; /* 设置链接颜色 */
    font-weight: bold; /* 设置链接文字加粗 */
    cursor: pointer; /* 添加手型光标效果 */
}

/* 鼠标悬停时添加特殊效果 */
a:hover {
  color: #4288c1; /* 设置悬停时的链接颜色 */
  text-decoration: underline; /* 添加悬停时的下划线效果 */
}
.glass-button {
  background-color: rgba(255, 255, 255, 0.3); /* 白色透明 */
  border-color: rgba(0, 191, 255, 0.3); /* 蓝色透明 */
  color: #333; /* 按钮文本颜色 */
}
#building {
  width: 99vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../assets/login_bj_two.jpg");
  background-size: cover;
}
.form-content{
    margin-bottom: 160px;
    margin-left: 900px;
}
.login_container {
  width: 370px;
  border: 1px solid #eaeaea;
  padding: 35px 35px 15px 35px;
  background-color: rgba(255, 255, 255, 0.5); /* 添加毛玻璃效果 */
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  box-sizing: border-box;

  .login_title {
    text-align: center;
    margin-bottom: 40px;
    color: #505458;
  }

 /* 更具体的选择器，确保样式优先级足够高 */
 .login_container .el-form-item .el-input .transparent-input {
    background-color: rgba(255, 255, 255, 0.3); /* 白色透明 */
    border-color: rgba(0, 191, 255, 0.3); /* 蓝色透明，可选设置 */
  }
}
</style>